<template>
	<el-header style="padding: 0">
		<div class="logo-box">
			<img src="@/assets/logo.png" />
			<h2>Clean Admin</h2>
		</div>
		<!-- tools -->
		<NavbarTool />
	</el-header>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import NavbarTool from '@/layouts/navbar/NavbarTool.vue';

defineComponent({ name: 'LayoutNavbar' });
</script>

<style scoped lang="scss">
.el-header {
	--base-border-color: var(--base-border-color);
}
.logo-box {
	display: flex;
	align-items: center;
	height: 56px;
	box-sizing: border-box;
	padding: 0 16px;

	img {
		width: 40px;
		height: 40px;
		object-fit: contain;
		margin-right: 8px;
		border-radius: 50%;
	}

	h2 {
		display: inline-flex;
		margin-bottom: 0 !important;
		transition: all 0.3s linear;
	}
}

.el-header {
	display: flex;
	align-items: center;
	padding: 0 16px !important;
	height: 56px;
	line-height: 56px;
	background: var(--base-background-color);
	border-bottom: 1px solid var(--base-border-color);

	.trigger {
		font-size: 18px;
		cursor: pointer;
		transition: color 0.3s;
		margin-right: 16px;
	}
}
</style>
